<template>
  <ul class="todo-list">
    <!-- completed: 完成的类名 -->
    <li 
    :class="{completed: item.isDone}"
    v-for="(item, index) in arr" 
    :key="item.id">
      <div class="view">
        <input class="toggle" type="checkbox" v-model="item.isDone"/>
        <label>{{ item.name }}</label>
        <button class="destroy" @click="delFn(index)"></button>
      </div>
    </li>
  </ul>
  
</template>

<script>
export default {
  props: ["arr"],
  // props规范: 单向数据流
  // 父 -> 子 传值 (尽量不要改变props的值)
  // 所有的操作都在一个页面
  // 如果list数组传过给10个组件(容易忘记哪个组件内部操作过这个数据), 最好统一在父级页面(增/删/改/查)
  methods: {
    delFn(ind){
      this.$emit("del", ind);
    }
  }
}
</script>